<template>
  <div id="app" class="df fd ac">
    <!-- 头部 -->
    <div class="header">
      <h1>
        <img @click="back" class="left-arrows" src="../../../assets/img/home-img/left-arrows.png" alt="">
        应急救援
      </h1>
    </div>
    <!-- 地图 -->
    <div class="box">
      <div class="map" id="map1"></div>
    </div>
    <!-- tab切换 -->
    <div class="box">
      <div class="df j-b f30 rescue-nav">
        <span v-for="(el, index) in arr" @click="tabs(index)" :class="{ active: index == number }" :key="index">{{ el
        }}</span>
      </div>
      <div v-if="tab1.switch">
        <div class="public-input"><span>位置</span><input required v-model="tab1.place" type="text"></div>
        <div class="public-input"><span>求助人</span><input required v-model="tab1.name" type="text"></div>
        <div class="public-input"><span>联系方式</span><input required v-model="tab1.phone" type="number"></div>
        <div class="public-input"><span>车牌</span><input required v-model="tab1.board" type="text"></div>
        <!-- <div class="public-input"><span>描述</span><input required v-model="tab1.describe" type="textarea"
            placeholder="请准确描述当前的状况及所需的帮助"></div> -->
      </div>
      <div v-if="tab2.switch">
        <div class="public-input"><span>位置</span><input required v-model="tab2.place" type="text"></div>
        <div class="public-input"><span>求助人</span><input required v-model="tab2.name" type="text"></div>
        <div class="public-input"><span>联系方式</span><input required v-model="tab2.phone" type="number"></div>
        <div class="public-input"><span>车牌</span><input required v-model="tab2.board" type="text"></div>
        <!-- <div class="public-input"><span>描述</span><input required v-model="tab2.describe" type="textarea"
            placeholder="请准确描述当前的状况及所需的帮助"></div> -->
      </div>
      <div v-if="tab3.switch">
        <div class="public-input"><span>起始</span><input required v-model="tab3.start" type="text"></div>
        <div class="public-input"><span>终点</span><input required v-model="tab3.destination" type="text"></div>
        <div class="public-input"><span>求助人</span><input required v-model="tab3.name" type="text"></div>
        <div class="public-input"><span>联系方式</span><input required v-model="tab3.phone" type="number"></div>
        <div class="public-input"><span>车牌</span><input required v-model="tab3.board" type="text"></div>
        <!-- <div class="public-input"><span>描述</span><input required v-model="tab3.describe" type="textarea"
            placeholder="请准确描述当前的状况及所需的帮助"></div> -->
      </div>
      <button class="sos-btn" @click="call">呼叫救援</button>
      <p class="record f23 c80" @click="record">救援记录 ></p>
    </div>
    <!-- 警务救助 -->
    <div class="box">
      <p class="f-title">警务救助</p>
      <div class="df j-a">
        <div class="df fd jc ac">
          <img class="f-img" src="../../../assets/img/yingji/traffic-accident.png" alt="">
          <span class="f24">交通事故</span>
          <i class="f24">122</i>
        </div>
        <div class="df fd jc ac">
          <img class="f-img" src="../../../assets/img/yingji/fire.png" alt="">
          <span class="f24">火警</span>
          <i class="f24">119</i>
        </div>
        <div class="df fd jc ac">
          <img class="f-img" src="../../../assets/img/yingji/first-aid.png" alt="">
          <span class="f24">急救中心</span>
          <i class="f24">120</i>
        </div>
        <div class="df fd jc ac">
          <img class="f-img" src="../../../assets/img/yingji/public-security.png" alt="">
          <span class="f24">公安报警</span>
          <i class="f24">110</i>
        </div>
      </div>
    </div>
    <ul class="footer  flex pf w100 jcsa f20 aic">
      <li class="fg1">
        <router-link to="/home" class="flex fdc img aic" href="#">
          <img src="../../../assets/img/home-img/home.png">
          <span class="active">首页</span>
        </router-link>
      </li>
      <li>
        <router-link to="/rescueIndex" style="background-color: skyblue;">
          <div class="rescue pr">
            <img class="pa" src="../../../assets/img/home-img/rescue.png">
          </div>
        </router-link>
      </li>
      <li class="fg1">
        <router-link to="/mine" class="flex fdc img1 aic" href="#">
          <img src="../../../assets/img/home-img/mine.png">
          <span>我的</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { giveOut } from '@/api/urgency'
export default {
  mounted() {
    var map = new BMapGL.Map("map1");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(113.56242682268147, 34.81307996499919), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var point = new BMapGL.Point(113.56242682268147, 34.81307996499919);
    var marker = new BMapGL.Marker(point);        // 创建标注
    var myIcon = new BMapGL.Icon(require("@/assets/img/maintain/location.png"), new BMapGL.Size(20, 60));
    // 创建标注对象并添加到地图  
    var marker = new BMapGL.Marker(point, { icon: myIcon });
    map.addOverlay(marker);// 将标注添加到地图中

  },
  data() {
    return {
      // tab切换
      arr: ['搭电', '换胎', '拖车'],
      activeIndex: '0',
      number: 0,
      tab1: {
        switch: true
        , title: '搭电'
        , place: ''// 位置
        , name: ''// 求助人
        , phone: null// 联系方式
        , board: ''// 车牌
        , describe: ''// 描述
      },
      tab2: {
        switch: false
        , title: '换胎'
        , place: ''// 位置
        , name: ''// 求助人
        , phone: null// 联系方式
        , board: ''// 车牌
        , describe: ''// 描述
      },
      tab3: {
        switch: false
        , title: ''
        , start: ''// 起始位置
        , destination: ''// 终点
        , name: ''// 求助人
        , phone: null// 联系方式
        , board: ''// 车牌
        , describe: ''// 描述
      },
    }
  },
  methods: {
    back() {
      this.$router.push({
        path: '/home'
      })
    },
    call() {
      switch (this.number) {
        case 0:
          giveOut({
            rescueType:0,
            rescuePosition: this.tab1.place, // 救援位置
            username: this.tab1.name, // 求助人
            rescueTel: this.tab1.phone, // 联系方式
            plateNumber: this.tab1.board, // 车牌
            // plateNumber: this.tab1.board, // 车牌
          })
            .then(r => {
              console.log(r);
            })
          break;
        case 1:
          giveOut({
            rescueType:1,
            rescuePosition: this.tab2.place, // 救援位置
            username: this.tab2.name, // 求助人
            rescueTel: this.tab2.phone, // 联系方式
            plateNumber: this.tab2.board, // 车牌
            // plateNumber: this.tab2.board, // 车牌
          })
            .then(r => {
              console.log(r);
            })
          break;
        case 2:
          giveOut({
            rescueType:2,
            rescuePosition: this.tab3.start, // 起始位置
            destinationPosition:this.tab3.destination, // 终点位置
            username: this.tab3.name, // 求助人
            rescueTel: this.tab3.phone, // 联系方式
            plateNumber: this.tab3.board, // 车牌
          })
            .then(r => {
              console.log(r);
              
            })
          break;
      }
    },
    record() {
      this.$router.push({
        path: '/rescuerecord'
      })// 救援记录页面
    },
    // tab切换
    tabs(e) {
      this.number = e
      switch (e) {
        case 0:
          this.tab1.switch = true;
          this.tab2.switch = false;
          this.tab3.switch = false;
          break
        case 1:
          this.tab1.switch = false;
          this.tab2.switch = true;
          this.tab3.switch = false;
          break
        case 2:
          this.tab1.switch = false;
          this.tab2.switch = false;
          this.tab3.switch = true;
          break
      }
    },
  }
}
</script>
<style scoped>
.left-arrows {
  height: 40rem;
  position: absolute;
  left: 24rem;
}

/* 页脚可复用 */
ul.footer {
  height: 115rem;
  left: 0;
  bottom: 0;
  background: url(../../../assets/img/home-img/rectangle.png) no-repeat;
  background-size: 100% 100%;
  z-index: 20;
}

ul.footer li a.img {
  text-align: center;
}

ul.footer li a.img img {
  height: 35rem;
  width: auto;
}

ul.footer li a.img1 img {
  height: auto;
  width: 34rem;
}

/* 被选中的颜色active */
ul.footer li a.img span.active {
  color: #2b7df4;
}

ul.footer li a div.rescue {
  height: 115rem;
  width: 115rem;
  background: url(../../../assets/img/wash-car-img/round-red.png) no-repeat;
  background-size: 100% 100%;
  bottom: 50rem;
}

ul.footer li a div.rescue img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45rem;
  height: auto;
}

.record {
  font-size: 20rem;
  text-align: center;
}

.sos-btn {
  width: 500rem;
  height: 77rem;
  background-color: #FF7438;
  border: none;
  font-size: 28rem;
  line-height: 77rem;
  color: white;
  font-weight: 545;
  border-radius: 50rem;
  display: block;
  margin: 10rem auto 25rem;
}

.rescue-nav {
  margin: 0 0 32rem;
}

.rescue-nav span {
  padding: 16rem;
}

.active {
  /* border-bottom: 7rem solid #0D66E8; */
  box-sizing: border-box;
}

.public-input input {
  border-radius: 50rem;
  padding: 21rem 30rem;
  font-size: 20rem;
  width: 410rem;
  border: 2rem solid #E8E8E8;
  color: #808080;
}

.public-input input:focus {
  outline: none;
}

.public-input input[type=textarea] {
  height: 138rem;
}

.public-input input[type=textarea]:focus {
  outline: none;
}

.public-input span {
  background-color: #4FA2FF;
  color: white;
  width: 146rem;
  height: 66rem;
  border-radius: 50rem;
  text-align: center;
  line-height: 66rem;
  font-size: 24rem;
  margin-right: 12rem;
}

.public-input {
  display: flex;
  margin-bottom: 33rem;
}

.map {
  height: 420rem;
}

.b-r-50 {
  border-radius: 50%;
}

.df {
  display: flex !important;
}

.fd {
  flex-direction: column !important;
}

.jc {
  justify-content: center !important;
}

.ac {
  align-items: center !important;
}

.j-a {
  justify-content: space-around !important;
}

.j-b {
  justify-content: space-between !important;
}

.f-img {
  width: 53rem;
  height: 55rem;
  margin: 42rem 0 32rem 0;
}

.f26 {
  font-size: 26rem;
}

.f24 {
  font-size: 24rem;
}

i {
  margin: 10rem 0;
}

.f-title {
  font-size: 30rem;
  font-weight: 550;
  margin-top: 10rem;
}

.title {
  font-size: 33rem;
}

.header {
  position: absolute;
  width: 100%;
  height: 436rem;
  z-index: 0;
  background-image: url('../../../assets/img/home-img/bg.png');
  background-size: 100%;
  top: 0rem;
}

.header h1 {
  text-align: center;
  font-size: 36rem;
  color: white;
  margin: 70rem 0 48rem;
}

.box {
  background-color: white;
  border-radius: 15rem;
  padding: 32rem;
  width: 92%;
  box-sizing: border-box;
  margin-top: 18rem;
  z-index: 1;
}

#app {
  background-color: #F7F7F7;
  padding: 148rem 0 162rem;
}
</style>